<!-- 待支付页面 -->
<template>
  <TopNavigation leftText="等待支付" :inToHome="true" :ToBePaid="changeOrder ? a : ToBePaid" />
  <view
    class="overflow-scroll overflow-hidden flex-col w-[100%] flex items-center"
    style="height: calc(100vh - 218rpx - 44rpx)"
  >
    <!-- 顶部问诊信息布局 -->
    <view
      class="bg-gradient-linear bg-gradient-[180deg,#2cb5a500_0%,#2cb5a575_100%] h-260rpx w-[100%] flex-col w-[100%] flex items-center"
      style="border-bottom-right-radius: 20rpx; border-bottom-left-radius: 20rpx"
    >
      <view class="mb-41rpx mt-29rpx justify-between w-[90%] flex" style="">
        <wd-text
          :text="'图片问诊' + (loginValue.zixun ? loginValue.zixun : 49) + '元'"
          custom-class="tpwzBox"
        ></wd-text>
        <wd-text text="待支付" custom-class="dzfBox"></wd-text>
      </view>
      <view class="w-[90%]">
        <wd-text text="服务医生信息" custom-class="ysxxBox"></wd-text>
      </view>
      <view
        class="mb--65rpx z-9 justify-between items-center shadow-[0px_0px_22px_0px_#e5e5e57f] rounded-[8px] bg-[#ffffff] w-[90%] h-146rpx flex"
        style=""
      >
        <view class="ml-30rpx items-center flex" style="">
          <img src="@/static/img/1.png" alt="" style="" class="border-rd-[100%] w-76rpx h-76rpx" />
          <view class="flex" style="flex-direction: column">
            <wd-text text="极速问诊" custom-class="jswzBox"></wd-text>
            <wd-text :text="UserData[0].docName" custom-class="fpysBox"></wd-text>
          </view>
        </view>
        <view class="mr-30rpx" style="">
          <wd-icon name="arrow-right" size="30rpx" color="#c3c3c5"></wd-icon>
        </view>
      </view>
    </view>
    <!-- 患者信息 -->
    <view class="w-[100%] flex flex-col items-center bg-[#fff]">
      <view
        class="border-b-1rpx border-b-solid border-b-[#f0f0f0] items-center pt-60rpx h-112rpx w-[90%] flex justify-between"
        style=""
      >
        <wd-text text="患者信息" custom-class="hzxxTitleBox"></wd-text>
        <wd-text
          :text="UserData[0].name + ' ' + UserData[0].sex + ' ' + UserData[0].age + '岁'"
          custom-class="hzxxTextBox"
        ></wd-text>
      </view>
      <view
        class="border-b-1rpx border-b-solid border-b-[#f0f0f0] items-center h-112rpx w-[90%] flex justify-between"
        style=""
      >
        <wd-text text="患病时长" custom-class="hzxxTitleBox"></wd-text>
        <wd-text :text="UserData[0].time" custom-class="hzxxTextBox"></wd-text>
      </view>
      <view
        class="border-b-1rpx border-b-solid border-b-[#f0f0f0] items-center h-112rpx w-[90%] flex justify-between"
        style=""
      >
        <wd-text text="就诊情况" custom-class="hzxxTitleBox"></wd-text>
        <wd-text :text="UserData[0].record" custom-class="hzxxTextBox"></wd-text>
      </view>
      <view
        class="justify-center items-start flex-col border-b-1rpx border-b-solid border-b-[#f0f0f0] h-112rpx w-[90%] flex"
        style=""
      >
        <wd-text text="病情描述" custom-class="hzxxTitleBox"></wd-text>
        <view class="h-10rpx"></view>
        <wd-text :text="UserData[0].description" custom-class="hzxxTextBox"></wd-text>
      </view>
    </view>
    <!-- 订单信息 -->
    <view class="mt-21rpx w-[100%] flex flex-col items-center bg-[#fff]" style="">
      <view class="border-b-[#f0f0f0] items-center h-80rpx w-[90%] flex justify-between" style="">
        <wd-text text="订单信息" custom-class="ddxxBox"></wd-text>
      </view>
      <view
        class="border-b-1rpx border-b-solid border-b-[#f0f0f0] items-center h-112rpx w-[90%] flex justify-between"
        style=""
      >
        <wd-text text="订单编号" custom-class="hzxxTitleBox"></wd-text>
        <wd-text :text="OrderNumber" custom-class="hzxxTextBox" @click="handleLongPress"></wd-text>
      </view>
      <view
        class="border-b-1rpx border-b-solid border-b-[#f0f0f0] items-center h-112rpx w-[90%] flex justify-between"
        style=""
      >
        <wd-text text="创建时间" custom-class="hzxxTitleBox"></wd-text>
        <wd-text :text="CurrentTime" custom-class="hzxxTextBox"></wd-text>
      </view>
      <view
        class="border-b-1rpx border-b-solid border-b-[#f0f0f0] items-center h-112rpx w-[90%] flex justify-between"
        style=""
      >
        <wd-text text="应付款" custom-class="hzxxTitleBox"></wd-text>
        <wd-text
          :text="'￥' + (loginValue.zixun ? loginValue.zixun : 49)"
          custom-class="hzxxTextBox"
        ></wd-text>
      </view>
      <view
        class="border-b-1rpx border-b-solid border-b-[#f0f0f0] items-center h-112rpx w-[90%] flex justify-between"
        style=""
      >
        <wd-text text="优惠卷" custom-class="hzxxTitleBox"></wd-text>
        <wd-text text="-￥10" custom-class="hzxxTextBoxA"></wd-text>
      </view>
      <view
        class="border-b-1rpx border-b-solid border-b-[#f0f0f0] items-center h-112rpx w-[90%] flex justify-between"
        style=""
      >
        <wd-text text="积分抵扣" custom-class="hzxxTitleBox"></wd-text>
        <wd-text text="-￥1" custom-class="hzxxTextBoxA"></wd-text>
      </view>
      <view
        class="border-b-1rpx border-b-solid border-b-[#f0f0f0] items-center h-112rpx w-[90%] flex justify-between"
      >
        <wd-text text="实付款" custom-class="hzxxTitleBox"></wd-text>
        <wd-text
          :text="'￥' + (loginValue.zixun ? loginValue.zixun - 10 - 1 : 49 - 10 - 1)"
          custom-class="hzxxTextBoxA"
        ></wd-text>
      </view>
    </view>
  </view>
  <!-- 底部 -->
  <view class="botBox">
    <view class="items-center w-[100%] h-88rpx bg-[#FFF7EB] flex justify-center" style="">
      <wd-text text="请在 00:14:59 内完成支付，超时订单将取消" custom-class="ddBox"></wd-text>
    </view>
    <view class="items-center py-21rpx w-[100%] bg-[#fff] flex justify-evenly" style="">
      <view>
        <wd-text text="需支付" custom-class="xzfBox"></wd-text>
        <wd-text
          :text="'￥' + (loginValue.zixun ? loginValue.zixun - 10 - 1 : 49 - 10 - 1) + '.00'"
          custom-class="zfjeBox"
        ></wd-text>
      </view>
      <view>
        <wd-button type="info" size="small" custom-class="qxwzButton" @click="CancelThePayment">
          取消问诊
        </wd-button>
        <wd-button type="success" size="small" @click="pay">继续支付</wd-button>
      </view>
    </view>
  </view>
  <!-- 去支付遮盖层 -->
  <wd-popup
    v-model="show"
    position="bottom"
    closable
    custom-style="height: 400px;border-radius:32rpx;"
    @close="handleClose"
  >
    <!-- 遮盖层里面的内容 -->
    <view class="w-[100%]" style="display: flex; flex-direction: column; align-items: center">
      <text style="margin: 20rpx 0; font-size: 40rpx">选择支付方式</text>
      <text style="margin: 20rpx 0; font-size: 60rpx">
        ￥{{ loginValue.zixun ? loginValue.zixun - 10 - 1 : 49 - 10 - 1 }}.00
      </text>
      <!-- 支付方式 -->
      <view
        v-for="i in loginValue.methodData.length"
        class="w-[90%] flex"
        style="align-items: center; justify-content: space-between; margin: 30rpx 0"
        @click="loginValue.changeMethod(i - 1)"
      >
        <view class="flex" style="align-items: end">
          <img
            v-if="i == 1"
            src="@/static/wx.png"
            alt=""
            class="w-50"
            style="margin-right: 20rpx"
          />
          <img v-else src="@/static/zfb.png" alt="" class="w-50" style="margin-right: 20rpx" />
          <text>{{ loginValue.methodData[i - 1].name }}</text>
        </view>
        <wd-checkbox :modelValue="i - 1 == loginValue.method ? true : false" />
      </view>
      <!-- 立即支付按钮 -->
      <wd-button
        v-if="loginValue.method == 1"
        type="success"
        style="width: 90%; margin: 30rpx 0"
        @click="ljzf"
      >
        立即支付
      </wd-button>
      <wd-button v-else type="success" style="width: 90%; margin: 30rpx 0" @click="ljzfa">
        立即支付
      </wd-button>
    </view>
  </wd-popup>
  <wd-toast z-999 />
</template>
<script lang="ts" setup>
import DoctorAPI from "@/api/system/doctor";
import OrderAPI from "@/api/system/OrderManagement";
import PayAPI from "@/api/system/pay";
import TopNavigation from "@/components/TopNavigation.vue";
import { LoginPinia } from "@/store/modules/Login";
import { OrderTyle } from "@/types/consult";
import { randomList } from "@/utils/randomList";
import { useToast } from "wot-design-uni";
const toast = useToast();
const loginValue = LoginPinia();
const show = ref(false);
function handleClose() {
  show.value = false;
}
const OrderNumber = randomList();

//支付事件
const ljzf = async () => {
  if (changeOrder.value) {
    const res = await OrderAPI.changeOrderState(changeOrder.value, "咨询中");
    console.log(res);
    uni.switchTab({ url: "/" });
  } else {
    const user = {
      ...loginValue.zcT[0],
      ...loginValue.ManagePatients[loginValue.selectPatient],
      PaymentIsDone: "咨询中",
      OrderNumber: OrderNumber,
      creatTime: CurrentTime.value,
    };
    const res = await DoctorAPI.addOrders(user);
    console.log(res);
    console.log(user);
  }

  toast.loading({
    loadingType: "ring",
    msg: "支付中...",
  });
  const response = await PayAPI.pay({
    out_trade_no: OrderNumber,
    product_code: "FAST_INSTANT_TRADE_PAY",
    subject: "问诊费",
    total_amount: (loginValue.zixun ? loginValue.zixun - 10 - 1 : 49 - 10 - 1).toFixed(2),
  });

  // 创建一个新的 div 元素
  const div = document.createElement("div");
  div.innerHTML = response as string; // 将返回的 HTML 表单字符串插入到 div 中

  // 将 div 添加到 body 中
  document.body.appendChild(div);

  // 执行返回的脚本以提交表单
  const script = div.querySelector("script");
  if (script) {
    eval(script.innerText);
  }
};

function ljzfa() {
  toast.show("暂不支持微信支付");
}
//实现长按复制文本的效果
const handleLongPress = () => {
  const textToCopy = OrderNumber;
  // 使用 navigator.clipboard.writeText 复制文本
  navigator.clipboard
    .writeText(textToCopy)
    .then(() => {
      toast.show("已复制到剪切板当中");
    })
    .catch((err) => {
      console.log("复制失败，请重试");
    });
};
//获取当前时间
function getCurrentDateTime(): string {
  const now = new Date();

  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
const CurrentTime = ref();
onMounted(() => {
  CurrentTime.value = getCurrentDateTime();
});
const UserData = ref<OrderTyle[]>([
  {
    OrderNumber: "string",
    PaymentIsDone: "string",
    age: "string",
    description: "string",
    identity: "string",
    img: [],
    money: 0,
    name: "string",
    record: "string",
    sex: "string",
    time: "string",
    creatTime: "string",
    docName: "string",
    department: "string",
    professionalTitle: "string",
    hospital: "string",
    coupon: 0,
    points: 0,
    paymentType: "string",
  },
]);
// 订单号
const changeOrder = ref();
onLoad(async (option) => {
  if (option && option.id !== undefined) {
    changeOrder.value = option.id;
    const res = await OrderAPI.getOrdersData(option.id);
    if (res) {
      UserData.value.unshift(res);
    }
    console.log(res);
  } else {
    UserData.value.unshift(loginValue.record[0]);
  }
});
// 点击取消按钮时执行的
async function CancelThePayment() {
  if (changeOrder.value) {
    const user = {
      ...loginValue.zcT[0],
      ...loginValue.ManagePatients[loginValue.selectPatient],
      PaymentIsDone: "已取消",
      OrderNumber: OrderNumber,
      creatTime: CurrentTime.value,
    };
    const res = await OrderAPI.changeOrderState(changeOrder.value, "已取消");
    console.log(res);
    uni.switchTab({ url: "/" });
  } else {
    const user = {
      ...loginValue.zcT[0],
      ...loginValue.ManagePatients[loginValue.selectPatient],
      PaymentIsDone: "已取消",
      OrderNumber: OrderNumber,
      creatTime: CurrentTime.value,
    };
    const res = await DoctorAPI.addOrders(user);
    console.log(res);
    uni.switchTab({ url: "/" });
  }
}
// 点击继续支付时执行的
function pay() {
  show.value = true;
  console.log("继续支付");
}
// 点击返回首页并且添加订单状态为待支付
async function ToBePaid() {
  const user = {
    ...loginValue.zcT[0],
    ...loginValue.ManagePatients[loginValue.selectPatient],
    PaymentIsDone: "待支付",
    OrderNumber: OrderNumber,
    creatTime: CurrentTime.value,
  };
  const res = await DoctorAPI.addOrders(user);
  console.log(res);
}

//点击返回首页
function a() {
  console.log("a");
}
</script>
<style lang="scss" scoped>
.tpwzBox {
  font-size: 32rpx !important;
  font-weight: medium !important;
  line-height: 48rpx !important;
  color: #121826 !important;
  text-align: left;
  letter-spacing: 0rpx;
}
.dzfBox {
  font-size: 32rpx !important;
  font-weight: medium !important;
  line-height: 48rpx !important;
  color: #16c2a3 !important;
  text-align: left;
  letter-spacing: 0rpx;
}
.ysxxBox {
  font-size: 28rpx !important;
  font-weight: regular !important;
  line-height: 42rpx !important;
  color: #3c3e42 !important;
  text-align: left;
  letter-spacing: 0rpx;
}
.jswzBox {
  font-size: 32rpx !important;
  font-weight: medium !important;
  line-height: 48rpx !important;
  color: #3c3e42 !important;
  text-align: left;
  letter-spacing: 0px;
}
.fpysBox {
  font-size: 26rpx !important;
  font-weight: light !important;
  line-height: 38rpx !important;
  color: #3c3e42 !important;
  text-align: left;
  letter-spacing: 0px;
}
.hzxxTitleBox {
  font-size: 32rpx !important;
  font-weight: regular !important;
  line-height: 32rpx !important;
  color: #3c3e42 !important;
  text-align: left;
  letter-spacing: 0px;
}
.hzxxTextBox {
  font-size: 32rpx !important;
  font-weight: regular !important;
  line-height: 32rpx !important;
  color: #848484 !important;
  text-align: right;
  letter-spacing: 0rpx;
}
.ddxxBox {
  font-size: 32rpx !important;
  font-weight: medium !important;
  line-height: 48rpx !important;
  color: #121826 !important;
  text-align: left;
  letter-spacing: 0rpx;
}
.hzxxTextBoxA {
  font-size: 32rpx !important;
  font-weight: regular !important;
  line-height: 32rpx !important;
  color: #eb5757 !important;
  text-align: right;
  letter-spacing: 0px;
}
.ddBox {
  font-size: 24rpx !important;
  font-weight: regular !important;
  line-height: 38rpx !important;
  color: #f2994a !important;
  text-align: left;
  letter-spacing: 0px;
}
.xzfBox {
  font-size: 28rpx !important;
  font-weight: regular !important;
  line-height: 32rpx !important;
  color: #3c3e42 !important;
  text-align: left;
  letter-spacing: 0px;
}
.zfjeBox {
  margin-left: 20rpx;
  font-size: 40rpx !important;
  font-weight: medium !important;
  line-height: 32rpx !important;
  color: #eb5757 !important;
  text-align: left;
  letter-spacing: 0px;
}
.qxwzButton {
  margin-right: 20rpx;
  color: #16c2a3 !important;
}
.botBox {
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>
